<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
function createXHR(){
	var xmlhttp;
	if (window.XMLHttpRequest){//支持XMLHttpRequest
	    xmlhttp = new XMLHttpRequest();
	}else{
	    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}
function getInfo(){
	//创建XMLHttpRequest对象
	xhr = createXHR();
	//设定请求地址
	var url = "../OrdinaryEmployeesServlet?button=1";
	//建立对服务器的调用
	xhr.open("POST", url, true);
	//指定响应事件处理函数
	xhr.onreadystatechange = function(){
		//当readyState等于4且状态为200时，表示响应已就绪
		if(xhr.readyState ==4 && xhr.status == 200){
			//将响应的JSON格式转换为JavaScript对象
			var data = eval("(" + xhr.responseText + ")");
			document.getElementById("name").value = data[0].name;
			document.getElementById("sex").value = data[0].sex;
			document.getElementById("age").value = data[0].age;
			document.getElementById("phone").value = data[0].phone;
			document.getElementById("deptidrole").value = data[0].deptname+" "+data[0].rolename;
		}
	};
	//向服务器发出请求
	xhr.send();
}
//失去焦点就异步修改 value 值，需获取“新值”和“该行数据的标记”
function updateInfo(newinfo,field){
	deptid = 1;	//标记该行数据 id号
	//创建XMLHttpRequest对象
	xhr = createXHR();
	//设定请求地址
	var url = "../OrdinaryEmployeesServlet?button=2"+"&field="+field+"&newinfo="+newinfo;
	//建立对服务器的调用
	xhr.open("POST", url, true);
	//指定响应事件处理函数
	xhr.onreadystatechange = function(){
		//当readyState等于4且状态为200时，表示响应已就绪
		if(xhr.readyState ==4 && xhr.status == 200){
			alert("更改成功")
			//将响应的JSON格式转换为JavaScript对象
// 			var date = eval("(" + xhr.responseText + ")");
// 			document.getElementById("userid").value = data.userid;
		}
	};
	//向服务器发出请求
	xhr.send();
}
</script>

</head>
<body onload="getInfo()">
<%if(session.getAttribute("user")==null){ %>
    <script>
		window.top.location.replace("../login.jsp");
	</script>
<%}%>
<div class="layuimini-container">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend><h2>个人信息</h2></legend>
	</fieldset>
	<div class="layuimini-main">
		<div class="layui-form-item">
	        <label class="layui-form-label required">真实姓名：</label>
	        <div class="layui-input-block">
	            <input type="text" id="name" name="name" class="layui-input" onblur="updateInfo(this.value,'name')" />
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <label class="layui-form-label required">性别：</label>
	        <div class="layui-input-block">
	            <input type="text" id="sex" name="sex" class="layui-input" onblur="updateInfo(this.value,'sex')" />
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <label class="layui-form-label required">年龄：</label>
	        <div class="layui-input-block">
	            <input type="text" id="age" name="age" class="layui-input" onblur="updateInfo(this.value,'age')" />
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <label class="layui-form-label required">联系电话：</label>
	        <div class="layui-input-block">
	            <input type="text" id="phone" name="phone" class="layui-input" onblur="updateInfo(this.value,'phone')" />
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <label class="layui-form-label required">所在部门和职位：</label>
	        <div class="layui-input-block">
	            <input type="text" id="deptidrole" name="deptidrole" class="layui-input" disabled="disabled" />
	        </div>
	    </div>
	</div>
</div>
</body>
</html>